<template>
	<div class="blogClassified">
		 <div class="blogClassified-type">
          <ul>
             <li v-for = "item in blogAriticleItem">
                <h1>{{item.time}}</h1>
                <div class="main" v-html="item.blogText">
               
                </div>
             </li>

          </ul>
		 </div>

		 <blogContentRight></blogContentRight>  
	</div>
    

</template>
<style scoped>
  .blogClassified{
  	    width: 1120px;
	    margin: 20px auto;
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    padding-top: 120px;
  }
  .blogClassified-type{
       width: 70%;
       background: white;
  } 
  .blogClassified-type ul li{
      list-style-type: none;
      padding: 20px 0;
      cursor: pointer;
      text-align: left;
      border:1px solid #eee;
      padding: 10px;
      margin-bottom: 10px
  }

  .blogClassified-type ul{
     padding: 20px
  }
  .blogClassified-type ul li h1{
    border-bottom: 1px solid #eee;
    padding:5px 0 ;
  }
</style>
<script>
  import blogContentRight from './blogContentRight'
  import img from '../assets/images/qd.jpg'

  export default {
    name: 'App',
    data () {
        return {
           id : '',
           blogAriticleItem : []
        }
    },
    created() {
         this.initblogList();
    },
    methods:{
         initblogList() {
             this.id = this.$route.query.id;
             let param = {
             	  rows : 5,
                index: 1,
                blogType : this.id
             };

             this.$http({
                       method: "get", 
                       url: this.url +'/articles/articlesType?rows=5&index=1&blogType='+ this.id,
              })
               .then(res => {
                   if(res.data.result.code == 200){
                        this.blogAriticleItem = res.data.result.result;
                   }else{
                        this.$message({
                           message: '查询失败',
                           error: 'error'
                        });
                   }

              })
         }
    },
    components: {
       blogContentRight: blogContentRight
    }
  }
</script>
